{{ define "link" }}
{{end}}
{{ define "script" }}
{{end}}
{{ define "style" }}
{{end}}
{{ define "content" }}
<h4 class="mt-2">监听路径配置</h4>
<div class="mb-1 mt-2">
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalFile"><i class="bi bi-plus-lg"></i>添加监听路径</button>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalUpload" onclick="SetUploadType(1)">上传策略文件</button>
</div>
<table class="table table-bordered table-hover caption-top align-middle table-sm">
    <thead class="table-light">
    <tr>
        <th scope="col">监听路径</th>
        <th scope="col" style="width:80px; min-width: 80px;">是否启用</th>
        <th scope="col" style="width:90px; min-width: 90px;">操作</th>
    </tr>
    </thead>
    <tbody id="tableFileBody">
    {{range $key,$value:=.paths}}
    <tr id="{{$key}}">
        <td>{{$value.Addr}}</td>
        {{ if $value.Use }}
        <td><strong class="text-success">使用中</strong></td>
        {{ else }}
        <td><strong class="text-danger">停用</strong></td>
        {{ end }}
        <td>
            {{ if $value.Use }}
            <a class="text-danger text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalStop" href="javascript:void(0);" onclick="ShowStopConfirmation('{{$value.Addr}}', 1);">停用</a>
            {{ else }}
            <a class="text-success text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalStart" href="javascript:void(0);" onclick="ShowStartConfirmation('{{$value.Addr}}', 1);">启用</a>
            {{ end }}
            <a class="text-danger text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalDelete" href="javascript:void(0);" onclick="ShowDeleteConfirmation('{{$value.Addr}}', 1);">删除</a>
        </td>
    </tr>
    {{end}}
    </tbody>
</table>

<h4 class="mt-3">服务器日志路径配置</h4>
<div class="mb-1 mt-2">
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalLog"><i class="bi bi-plus-lg"></i>添加服务器日志路径</button>
    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalUpload" onclick="SetUploadType(2)">上传策略文件</button>
</div>
<table class="table table-bordered table-hover caption-top align-middle table-sm">
    <thead class="table-light">
    <tr>
        <th scope="col">日志路径</th>
        <th scope="col" style="width:80px; min-width: 80px;">是否启用</th>
        <th scope="col" style="width:90px; min-width: 90px;">操作</th>
    </tr>
    </thead>
    <tbody id="tableLogBody">
    {{range $logKey,$logValue:=.logs}}
    <tr id="{{$logKey}}">
        <td>{{$logValue.Addr}}</td>
        {{ if $logValue.Use }}
        <td><strong class="text-success">使用中</strong></td>
        {{ else }}
        <td><strong class="text-danger">停用</strong></td>
        {{ end }}
        <td>
            {{ if $logValue.Use }}
            <a class="text-danger text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalStop" href="javascript:void(0);" onclick="ShowStopConfirmation('{{$logValue.Addr}}', 2);">停用</a>
            {{ else }}
            <a class="text-success text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalStart" href="javascript:void(0);" onclick="ShowStartConfirmation('{{$logValue.Addr}}', 2);">启用</a>
            {{ end }}
            <a class="text-danger text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalDelete" href="javascript:void(0);" onclick="ShowDeleteConfirmation('{{$logValue.Addr}}', 2);">删除</a>
        </td>
    </tr>
    {{end}}
    </tbody>
</table>

<!-- Modal -->
<div class="modal fade" id="modalFile" tabindex="-1" aria-labelledby="modalFileLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modalFileLabel">新增监听路径</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modalFileBody" class="modal-body">
                <div class="mb-1 row">
                    <label class="col-sm-2 col-form-label">监听路径</label>
                    <div class="col-sm-10 ps-2 pe-2">
                        <input type="text" class="form-control" id="pathFile">
                    </div>
                </div>
                <div class="mb-1 row">
                    <label class="col-sm-2 col-form-label">是否启用</label>
                    <div class="col-auto ps-2 pe-2 align-content-center">
                        <input class="form-check-input" type="checkbox" id="is_use_file" checked>
                        <label class="form-check-label" for="is_use_file">
                            启用
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="PathAddForFile()">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="modalLog" tabindex="-1" aria-labelledby="modalLogLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modalLogLabel">新增服务器日志路径</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modalLogBody" class="modal-body">
                <div class="mb-1 row">
                    <label class="col-sm-2 col-form-label">监听路径</label>
                    <div class="col-sm-10 ps-2 pe-2">
                        <input type="text" class="form-control" id="pathLog">
                    </div>
                </div>
                <div class="mb-1 row">
                    <label class="col-sm-2 col-form-label">是否启用</label>
                    <div class="col-auto ps-2 pe-2 align-content-center">
                        <input class="form-check-input" type="checkbox" id="is_use_log" checked>
                        <label class="form-check-label" for="is_use_log">
                            启用
                        </label>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="PathAddForLog()">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalDelete" tabindex="-1" aria-labelledby="modalDeleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modalDeleteLabel">删除确认</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modalDeleteBody" class="modal-body">
                <div>
                    <span>路径：</span><strong><span id="delPath"></span></strong>
                </div>
                <h5 class="mt-2">确认删除此路径信息？</h5>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="PathDelete()">确认</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalUpload" tabindex="-1" aria-labelledby="modalUploadLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="modalUploadLabel">策略上传</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="modalUploadBody" class="modal-body">
                <div>
                    <span>类型：</span><strong><span id="upload_file_title"></span></strong>
                </div>
                <input type="file" id="upload_file" class="form-control mt-1" name="file" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="Upload()">确认</button>
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
{{ end }}
{{ define "scripts" }}
<script>
    let formPathFile = $(document.getElementById("pathFile"));
    let formIsUseFile = $(document.getElementById("is_use_file"));
    let formPathLog = $(document.getElementById("pathLog"));
    let formIsUseLog = $(document.getElementById("is_use_log"));
    let formFile = $(document.getElementById("upload_file"));

    let formDelPathIndex = -1;
    let formDelType = -1;
    let formDelPath = $(document.getElementById("delPath"));

    let uploadType = -1;
    let formUploadTypeTitle = $(document.getElementById("upload_file_title"));

    function SetUploadType(t){
        uploadType = -1;
        if(t !== 1 && t !== 2){
            return;
        }
        uploadType = t;
        if(t === 1){
            formUploadTypeTitle.text("目录监听");
        }else if(t === 2){
            formUploadTypeTitle.text("服务器日志监听");
        }
    }

    function Upload(){

    }

    function PathAddForFile(){
        let data = {
            path: formPathFile.val(),
            is_use: formIsUseFile.prop("checked"),
            type: 1,
        };

        $.ajax({
            url: "/v1/api/path/add",
            type: "POST",
            data: data,
            success: function (res) {
                if(res.code === 0){
                    $('#modalFile').modal('hide');
                    let alertDiv = document.createElement("div");
                    alertDiv.id = "globalAlert";
                    alertDiv.className = "alert alert-success alert-dismissible fade show"; // 设置样式
                    alertDiv.role = "alert";
                    alertDiv.innerHTML = `
                            <strong>提示：</strong>${res.msg}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    `;

                    let newRow = `
                        <tr>
                            <td>${data.path}</td>
                            <td><a class="text-danger text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalDelete" href="javascript:void(0);" onclick="ShowDeleteConfirmation('${data.path.replace(/\\/g, '\\\\')}', 1);">删除</a></td>
                        </tr>
                    `;

                    if(data.type === 1){
                        $("#tableFileBody").append(newRow);
                    }else{
                        $("#tableLogBody").append(newRow);
                    }

                    // 将 Alert 插入到页面顶部，不影响布局
                    document.body.appendChild(alertDiv);

                    // 自动在5秒后移除 Alert
                    setTimeout(() => {
                        alertDiv.classList.remove("show");
                        alertDiv.classList.add("fade");
                        setTimeout(() => alertDiv.remove(), 500);
                    }, 3000);
                }
            },
            error: function (error) {
                var res = error.responseJSON;
                let alertDiv = document.createElement("div");
                alertDiv.id = "globalAlert";
                alertDiv.className = "alert alert-danger alert-dismissible fade show"; // 设置样式
                alertDiv.role = "alert";
                alertDiv.innerHTML = `
                        <strong>错误：</strong>${res.msg}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;

                document.body.appendChild(alertDiv);

                setTimeout(() => {
                    alertDiv.classList.remove("show");
                    alertDiv.classList.add("fade");
                    setTimeout(() => alertDiv.remove(), 500);
                }, 3000);
            }
        });
    }

    function PathAddForLog(){
        let data = {
            path: formPathLog.val(),
            is_use: formIsUseLog.prop("checked"),
            type: 2,
        };

        $.ajax({
            url: "/v1/api/path/add",
            type: "POST",
            data: data,
            success: function (res) {
                if(res.code === 0){
                    $('#modalLog').modal('hide');
                    let alertDiv = document.createElement("div");
                    alertDiv.id = "globalAlert";
                    alertDiv.className = "alert alert-success alert-dismissible fade show"; // 设置样式
                    alertDiv.role = "alert";
                    alertDiv.innerHTML = `
                            <strong>提示：</strong>${res.msg}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    `;

                    let newRow = `
                        <tr>
                            <td>${data.path}</td>
                            <td><a class="text-danger text-decoration-none" data-bs-toggle="modal" data-bs-target="#modalDelete" href="javascript:void(0);" onclick="ShowDeleteConfirmation('${data.path.replace(/\\/g, '\\\\')}', 2);">删除</a></td>
                        </tr>
                    `;

                    if(data.type === 1){
                        $("#tableFileBody").append(newRow);
                    }else{
                        $("#tableLogBody").append(newRow);
                    }

                    // 将 Alert 插入到页面顶部，不影响布局
                    document.body.appendChild(alertDiv);

                    // 自动在5秒后移除 Alert
                    setTimeout(() => {
                        alertDiv.classList.remove("show");
                        alertDiv.classList.add("fade");
                        setTimeout(() => alertDiv.remove(), 500);
                    }, 3000);
                }
            },
            error: function (error) {
                var res = error.responseJSON;
                let alertDiv = document.createElement("div");
                alertDiv.id = "globalAlert";
                alertDiv.className = "alert alert-danger alert-dismissible fade show"; // 设置样式
                alertDiv.role = "alert";
                alertDiv.innerHTML = `
                        <strong>错误：</strong>${res.msg}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;

                document.body.appendChild(alertDiv);

                setTimeout(() => {
                    alertDiv.classList.remove("show");
                    alertDiv.classList.add("fade");
                    setTimeout(() => alertDiv.remove(), 500);
                }, 3000);
            }
        });
    }

    function PathDelete(){
        let data = {
            path: formDelPath.text(),
            type: formDelType,
        };

        $.ajax({
            url: "/v1/api/path/delete",
            type: "POST",
            data: data,
            success: function (res) {
                if(res.code === 0){
                    $('#modalDelete').modal('hide');
                    let alertDiv = document.createElement("div");
                    alertDiv.id = "globalAlert";
                    alertDiv.className = "alert alert-success alert-dismissible fade show"; // 设置样式
                    alertDiv.role = "alert";
                    alertDiv.innerHTML = `
                            <strong>提示：</strong>${res.msg}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    `;

                    // 将 Alert 插入到页面顶部，不影响布局
                    document.body.appendChild(alertDiv);

                    if(data.type === 1){
                        $("#tableFileBody tr").eq(formDelPathIndex).remove()
                    }else{
                        $("#tableLogBody tr").eq(formDelPathIndex).remove()
                    }

                    // 自动在5秒后移除 Alert
                    setTimeout(() => {
                        alertDiv.classList.remove("show");
                        alertDiv.classList.add("fade");
                        setTimeout(() => alertDiv.remove(), 500);
                    }, 3000);
                }
            },
            error: function (error) {
                var res = error.responseJSON;
                let alertDiv = document.createElement("div");
                alertDiv.id = "globalAlert";
                alertDiv.className = "alert alert-danger alert-dismissible fade show"; // 设置样式
                alertDiv.role = "alert";
                alertDiv.innerHTML = `
                        <strong>错误：</strong>${res.msg}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                `;

                document.body.appendChild(alertDiv);

                setTimeout(() => {
                    alertDiv.classList.remove("show");
                    alertDiv.classList.add("fade");
                    setTimeout(() => alertDiv.remove(), 500);
                }, 3000);
            }
        });
    }

    function ShowDeleteConfirmation(_path, _type){
        let _index = 0;
        formDelPathIndex = -1;
        $("#tableFileBody tr").each(function() {
            let firstTdContent = $(this).find('td:first').text();
            if(_path === firstTdContent){
                formDelPathIndex = _index;
            }
            _index++;
        });
        if(formDelPathIndex === -1){
            _index = 0;
            $("#tableLogBody tr").each(function() {
                let firstTdContent = $(this).find('td:first').text();
                if(_path === firstTdContent){
                    formDelPathIndex = _index;
                }
                _index++;
            });
        }
        formDelType = _type;
        formDelPath.text(_path);
    }
</script>
{{ end }}